import React, { Component } from "react";
import { PickerView, Flex, Button, WingBlank } from "antd-mobile";
import "./index.scss";

class MyCommonPickView extends Component {
  state = {
    dataList: [],
    value: [],
  };

  // 组件即将挂载
  componentDidMount() {
    const { propsData, defaultValue } = this.props;

    let list = [];
    for (let i in propsData) {
      list.push(propsData[i]);
    }

    this.setState({
      dataList: list,
      value: defaultValue,
    });
  }
  componentWillUnmount() {
    this.setState({
      dataList: [],
      value: [],
    });
  }

  // 解析 子组件的数据给父组件
  sendChildData = (isSelect) => {
    const { value } = this.state;
    const { collectDataMethod } = this.props;

    const temp = {};
    temp.type = value[0];
    if (isSelect) {
      if (value[0] === "area") {
        if (value[value.length - 1] !== "null") {
          temp.data = value[value.length - 1];
          collectDataMethod(temp, 0, isSelect, value);
        } else {
          temp.data = value[value.length - 2];
          collectDataMethod(temp, 0, isSelect, value);
        }
      } else {
        if (value[value.length - 1] !== "null") {
          temp.data = value[value.length - 1];
          collectDataMethod(temp, 0, isSelect, value);
        } else {
          temp.data = value[value.length - 2];
          collectDataMethod(temp, 0, isSelect, value);
        }
      }
    } else {
      collectDataMethod("", 0, isSelect, "");
    }
  };
  render() {
    const { dataList, value } = this.state;
    const { cols } = this.props;

    return (
      <div className="MyCommonPickViewWrapper">
        <div>
          <PickerView
            data={dataList}
            cols={cols}
            value={value}
            onChange={(item) => {
              this.setState({
                value: item,
              });
            }}
          />
        </div>
        <div>
          <Flex>
            <Flex.Item>
              <WingBlank>
                <Button
                  type="primary"
                  onClick={() => {
                    this.sendChildData(false);
                  }}
                >
                  取消
                </Button>
              </WingBlank>
            </Flex.Item>
            <Flex.Item>
              <WingBlank>
                <Button
                  type="warning"
                  onClick={() => {
                    this.sendChildData(true);
                  }}
                >
                  确定
                </Button>
              </WingBlank>
            </Flex.Item>
          </Flex>
        </div>
      </div>
    );
  }
}

export default MyCommonPickView;
